<template>

  <section class="add-receipt-address">
    <AddressHeader :title="title"></AddressHeader>
		<div class="NewReceivingAddress_input">
			<p>收货人<input type="text" placeholder="收货人姓名"  /></p>
			<p>联系方式<input type="tal" placeholder="联系人手机号" /></p>
			<p>所在地址<input type="text" placeholder="请选择收获地区" /></p>
      <div class="tankuan">
        <mu-raised-button label="下面弹出" @click="open('bottom')"/>
        <mu-popup position="bottom" popupClass="demo-popup-bottom" :open="bottomPopup" @close="close('bottom')">
          <mu-appbar title="弹出">
            <mu-flat-button slot="right" label="关闭" color="white" @click="close('bottom')"/>
          </mu-appbar>
          <mu-content-block>
            123
          </mu-content-block>
        </mu-popup>
      </div>
			<p>详细地址<input type="text" placeholder="街道详细地址" /></p>
			<ul>
				<li>设置默认地址</li>
				<li><input type="checkbox" id="isDefault" /></li>
			</ul>
			<router-link to="/ReceiptAddress">
				<button>保存</button>
			</router-link>
		</div>
  </section>

</template>

<script lang="js">
import axios from 'axios'
import 'muse-ui/dist/muse-ui.css'
import AddressHeader from './Address_header.vue'
  export default  {
    name: 'add-receipt-address',
    mounted() {

    },
    data() {
      return {
        title:'新增收货地址',
        bottomPopup: false
      }
    },
    created(){
      var url = "http://vueshop.glbuys.com/api/user/address/defaultAddress?uid=696443691&token=1ec949a15fb709370f"
      axios.get(url).then((res) => {
        console.log(res.data)
      })
    },
    components:{
      AddressHeader:AddressHeader
    },
    methods: {
      back() {
				if(window.history.length <= 1) {
					this.$router.push({
						path: '/ReceiptAddress'
					})
					return false
				} else {
					this.$router.go(-1)
				}
				//上面都没执行就说明卡在当前页不是最后一条， histroy记录数量大于1，又没有回退记录，只能返回首页，
				//如果上面都执行了 页面都跳走了，这个也就不用管了   
				setTimeout(() => {
					this.$router.push({
						path: '/ReceiptAddress'
					})
				}, 0)
      },
      open (position) {
      this[position + 'Popup'] = true
      },
      close (position) {
        this[position + 'Popup'] = false
      }
    },
    computed: {

    },
    watch: {
    topPopup (val) {
      if (val) {
        setTimeout(() => {
          this.topPopup = false
        }, 2000)
      }
    }
  }
}
</script>

<style scoped>
.add-receipt-address {
  width: 100%;
}
.header {
  width: 100%;
  height: 1rem;
  border-bottom: 0.01rem solid #dedee0;
  overflow: hidden;
}

.header h1 {
  font-size: 0.35rem;
  text-align: center;
  padding-top: 0.25rem;
  margin-right: 0.5rem;
  color: #294072;
}

.header img {
  width: 0.7rem;
  height: 0.8rem;
  margin: 0.15rem 0 0 0.11rem;
  float: left;
}

.NewReceivingAddress_input {
  width: 100%;
}

.NewReceivingAddress_input p {
  font-size: 0.32rem;
  color: #323232;
  border-bottom: 0.01rem solid #f2f2f2;
  padding: 0.35rem 0.15rem 0.35rem 0.35rem;
}

.NewReceivingAddress_input ul li:nth-last-child(2) {
  padding: 0.35rem 0.15rem 0.35rem 0.35rem;
  float: left;
  font-size: 0.32rem;
  color: #323232;
}

.NewReceivingAddress_input ul {
  border-bottom: 0.01rem solid #f2f2f2;
}

.NewReceivingAddress_input input {
  border: none;
  height: 0.4rem;
  padding: 0 0.15rem;
  border-width: 0;
  border-color: white;
  border-style: none;
  background: none;
}

#isDefault {
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.37rem;
  border: #efefef solid 1px;
}

.NewReceivingAddress_input button {
  width: 6.7rem;
  height: 0.8rem;
  border-radius: 0.06rem;
  border: none;
  background: #fcb40a;
  color: white;
  font-size: 0.32rem;
  margin: 0.4rem;
}

.tankuan{
  width: 100%
}

.demo-popup-bottom {
  width: 100%;
  max-width: 375px;
}
</style>
